<template>
  <div class="meal-container">
    <div
      v-for="item in meals"
      :key="item.id"
      class="meal-card"
      @click="openCarousel(item.id)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Carouse",
  data() {
    return {
      meals: [{"id":1,"name":"套餐A"},{"id":2,"name":"套餐B"},{"id":3,"name":"套餐C"}] // 改为从接口获取
    };
  },
  mounted() {
    this.fetchMeals();
  },
  methods: {
    // 获取套餐列表
    async fetchMeals() {
      // try {
      //   const res = await axios.get('/api/meal/list');
      //   this.meals = res.data;
      // } catch (e) {
      //   console.error('获取套餐列表失败', e);
      // }
    },

    // 打开轮播页面
    openCarousel(id) {
      window.open(`/carousel?id=${id}`, "_blank");
    }
  }
};
</script>
<style scoped>
.meal-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 100px;
}

.meal-card {
  width: 200px;
  height: 120px;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 120px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out;
}
.meal-card:hover {
  background-color: #e0e0e0;
  transform: scale(1.05);
}
</style>
